<template>
  <div class="tool-list">
    <div class="tool-menu tool-scale">
      <div class="tool-item" v-for="(item, index) in list[1]" :key="index" @click="handleOperat(item)">
        <a-tooltip placement="right">
          <template #title>{{ item.name }}</template>
          <span class="icon iconfont" v-html="item.icon"></span>
        </a-tooltip>
      </div>
    </div>
    <div class="tool-menu tool-row">
      <div class="tool-item" v-for="(item, index) in list[0]" :key="index" @click="handleOperat(item)">
        <a-tooltip placement="right">
          <template #title>{{ item.name }}</template>
          <span class="icon iconfont" v-html="item.icon"></span>
        </a-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
  import DrawMethods from './draw';
  const list = [
    [
      {
        name: '距离',
        icon: '&#xe611;',
        fn: 'handleDraw',
        params: 'LineString',
      },
      {
        name: '面积',
        icon: '&#xe817;',
        fn: 'handleDraw',
        params: 'area',
      },
      {
        name: '方位',
        icon: '&#xe610;',
        fn: 'handleERBL',
      },
      {
        name: '清空',
        icon: '&#xe612;',
        fn: 'handleClearDraw',
      },
    ],
    [
      {
        name: '放大',
        icon: '&#xe61d;',
        fn: 'handleZoom',
        params: 1,
      },
      {
        name: '缩小',
        icon: '&#xe621;',
        fn: 'handleZoom',
        params: -1,
      },
    ],
  ];
  export default {
    props: {
      map: {
        default: () => {},
      },
    },
    data() {
      return {
        list,
        pointList: [],
        areaList: [],
        pointVisible: true,
      };
    },
    methods: {
      handleOperat(row) {
        // this[row.fn](row);
        this.$emit('handleOperat', row);
      },
      // 缩放
      handleZoom(row) {
        const view = this.map.getView();
        const zoom = view.getZoom();
        view.setZoom(zoom + row.params);
      },
      // 测绘
      handleDraw(row) {
        DrawMethods.measure(this.map, row.params);
      },
      // ERBL
      handleERBL() {
        DrawMethods.measureERBL(this.map);
      },
      // 清空绘制
      handleClearDraw() {
        var layerTmp = this.map
          .getLayers()
          .getArray()
          .find((m) => m.get('name') === 'DRAW');
        if (layerTmp) DrawMethods.handleClearDraw(layerTmp, this.map);
      },
    },
  };
</script>

<style scoped lang="less">
  .tool-list {
    position: absolute;
    z-index: 1;
    left: 340px;
    bottom: 80px;
    .tool-menu {
      background-color: #fff;
      border-radius: 3px;
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
      .tool-item {
        padding: 6px 8px;
        cursor: pointer;
        font-size: 18px;
        color: #666;
        &:hover {
          color: #00a0ff;
        }
      }
    }
    .tool-row {
      margin-top: 10px;
    }
    .tool-scale {
      .tool-item {
        &:first-of-type {
          border-bottom: 1px solid #bbb;
        }
      }
    }
  }
</style>
